<html>
	<head>
		<meta http-equiv="no-cache">
		<meta http-equiv="Expires" content="-1">
		<meta http-equiv="Cache-Control" content="no-cache, NO-STORE">
		<meta http-equiv="PRAGMA" content="NO-CACHE">
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		
		<script type="text/javascript">
			
			function get_number(){
				var n;
				
				app.loadData();
				var sum = document.getElementById("output");
				n = app.getN();
				sum.innerHTML = "<p>Currently, in our database, there are " + n + " parking lots available to use. These parking lot information is provided from Parkopedia.com.</p>" + app.getVer();
			}
			
			function get_info(){
				var sum = document.getElementById("output");
				sum.innerHTML = "<p>This service is created by Keehyung Kim and Hyunwoo Kim as a group-project work in ISyE635 instructed by Prof Jeff Linderoth. To see more information, visit our wiki page: <a href='http://neos-dev2.discovery.wisc.edu/NEOS/index.php/M-POP:_Madison_Parking_Optimization_Problem'>Go to Wiki page</a>.</p>";
			}

			var ParkMarkers = [];
			
			var MarkersArray = [];
			var Coordinates= [];
			var travelPathArray = [];
			var map;
			
			var marker = new google.maps.Marker();
			var coord;
			var destination = new google.maps.Marker();
			var dest_coord = null;
			var start = new google.maps.Marker();
			var start_coord = null;
			
			var directionDisplay;
			var directionsService = new google.maps.DirectionsService();
			var service = new google.maps.DistanceMatrixService();
			
			// S : http://google-maps-icons.googlecode.com/files/blueS.png
			// D : http://google-maps-icons.googlecode.com/files/blueD.png
			var sicon = new google.maps.MarkerImage("http://google-maps-icons.googlecode.com/files/blueS.png");
			var dicon = new google.maps.MarkerImage("http://google-maps-icons.googlecode.com/files/blueD.png");
			var picon = new google.maps.MarkerImage("http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-9d7050/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/parkinggarage.png");
			
			function initialize() {
				// load map
				directionDisplay = new google.maps.DirectionsRenderer();
				
				var myLatlng = new google.maps.LatLng(43.072681,-89.40146);
				var myOptions = {
					zoom: 16,
					center: myLatlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
			
				map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				directionDisplay.setMap(map);
				
				google.maps.event.addListener(map, 'click', function(event){
					marker.setMap(null);
					marker = new google.maps.Marker({
						position: event.latLng,
						map: map,
						title: 'location marker'
					});
					coord = event.latLng;
					
					//attachMessage(marker, event.latLng);
					// save coordinates to draw line
					//Coordinates.push({location:event.latLng, stopover:true});
					// save marker
					//MarkersArray.push(marker);
				});				
			}

			function set_start() {
				if (start_coord) {
					start.setMap(null);
				}
				start_coord = coord;
				start = new google.maps.Marker({
					icon: sicon,
					position: start_coord, 
					map: map,
					title: 'start marker'
				});
				marker.setMap(null);
				marker = new google.maps.Marker();
				
				var sum = document.getElementById("output");
				//sum.innerHTML = "<br/> Starting point is  . <br/>";
			}
			
			function set_dest() {
				if (dest_coord) {
					destination.setMap(null);
				}
				dest_coord = coord;
				destination = new google.maps.Marker({
					icon: dicon,
					position: dest_coord,
					map: map,
					title: 'destination marker'
				});
				marker.setMap(null);
				marker = new google.maps.Marker();
				
				var sum = document.getElementById("output");
				//sum.innerHTML = "<br/> Destination is " + destination.getLatLng().toUrlValue() +". <br/>";
			}
			
			var nearLots = [];
			
			/*function showNearLots(){
				for (i=0;i<ParkMarkers.length;i++)
				{
					ParkMarkers[i].setMap(null);
				}
			dest_coord = coord;
				destination = new google.maps.Marker({
					icon: dicon,
					position: dest_coord,
					map: map,
					title: 'destination marker'
				});
			}*/
			
			function reRoute(i, request, sum){
				directionsService.route(request, function(response, status) {
					if (status == google.maps.DirectionsStatus.OK) {
						var route = response.routes[0];
						var d = route.legs[0].distance.value;
						if (d <= 800) {
							sum.innerHTML += route.legs[0].start_address + " :   " + d + " meter <br/>";					
							//sum.innerHTML += d + "<br/>";
							//return d; 
							
							//for (var i=0;i<nearLots.length;i++){
								/*var myl = new google.maps.address(route.legs[0].start_address);
								var pmark = new google.maps.Marker({
									icon: picon,
									position: myl,
									map: map
								});
								ParkMarkers.push(pmark);*/
							//}

						}
						nearLots.push({
							lot: route.legs[0].start_address,
							dist: d
						});
					}
				});	
			}
			
			function get_routes() {
				// get close parking lots
				app.initialDist();
				app.loadData();
				var N = app.getN();
			
				for (i=0;i<ParkMarkers.length;i++)
				{
					ParkMarkers[i].setMap(null);
				}
				ParkMarkers = [];
				
				nearLots = [];
				
				var sum = document.getElementById("output");
				sum.innerHTML = "Here, we show the list of parking lots (with distance to destination) that are in 800 meters from destination.<br/><br/>";
				// check whether the parking lot is close or not
				var requests = [];
				for (var i=0;i<N;i++){
					//var startpt = app.getAddr(i);
					requests.push({
						origin:app.getAddr(i), 
						destination:dest_coord,
						travelMode: google.maps.DirectionsTravelMode.WALKING
					});	
				}
				
				for (var i=0;i<requests.length;i++){
					reRoute(i,requests[i], sum);
				}

				var divi = document.getElementById('step3');
				divi.innerHTML = '<p>Now you can see close Parking Lots information on Output section. Click "Get Distance Network" button to see the distances among start point, close parking lots, and destination.<br/><input type="submit" value="Get Distance Network" onclick="get_network()" /><br/></p>';
			}
			

			function lotsort(a, b)
			{
				return a.dist - b.dist;
			}
			
			var Nn = 0;
			function get_network()
			{
				nearLots.sort(lotsort);
				var n = nearLots.length;
				var sum = document.getElementById("output");
				sum.innerHTML = "";
				
				for (var i=0; i<n; i++)
					if (nearLots[i].dist > 800) {
						n = i;
						break;
					}
				if (n > 8) n = 8;
				Nn = n;
				for (var i=0; i<n; i++)
				{
					sum.innerHTML += nearLots[i].lot + "<br/>";
					app.setNearD(nearLots[i].lot);
				}
				
				sum.innerHTML += "Finished!";
				
				get_distmatrix();
				
				var divi = document.getElementById('step4');
				divi.innerHTML = '<p>Click "Optimal Route" button to find the best route to visit 3 consecutive parking lots.<input type="submit" value="Optimal Route" onclick="optimal()" /><br/></p>';
			}
			
			function get_distmatrix(){
				// Let's calculate distance matrix
				var places = [];
				var n = Nn;

				var outputDiv = document.getElementById('output');
				//outputDiv.innerHTML = n + "<br/> adf <br/>";		
				
				places.push(start_coord);
				//outputDiv.innerHTML += start_coord + "<br/>";	
				for (var i = 0; i < n; i++) {
					places.push(nearLots[i].lot);
					//outputDiv.innerHTML += nearLots[i].lot + "<br/>";		
				}
				places.push(dest_coord);
				//outputDiv.innerHTML += dest_coord + "<br/>";	

	

				service.getDistanceMatrix({
					origins: places, //[new google.maps.LatLng(43.072681,-89.40146), new google.maps.LatLng(43,-89)], //waypts,
					destinations: places, //[new google.maps.LatLng(43.072681,-89.40146), new google.maps.LatLng(43,-89)], //waypts,
					travelMode: google.maps.TravelMode.DRIVING,
					unitSystem: google.maps.UnitSystem.METRIC,
					avoidHighways: false,
					avoidTolls: false
				}, callback);			
			}
			
			function callback(response, status){
				if (status == google.maps.DistanceMatrixStatus.OK) {
					var origins = response.originAddresses;
					var destinations = response.destinationAddresses;
					var outputDiv = document.getElementById('output');
					outputDiv.innerHTML = "<br/> Here is the distance matrix. We show the distance between two locations including start point, close parking lots, and destination.<br/><br/>";

					for (var i = 0; i < origins.length; i++) {
						var results = response.rows[i].elements;
						for (var j = 0; j < results.length; j++) {	
							var element = results[j];
							var distance = element.distance.text;
							var duration = element.duration.text;
							var from = origins[i];
							var to = destinations[j];
							
							outputDiv.innerHTML += from.substr(0,35) + "   =>   " + to.substr(0,35) + " :    " + distance + " (in " + duration + ") <br />";
								
							//app.setDist(i,j,element.distance.value);
							if (i==j) continue;
							
							if (i==0) from = "START";
							if (i==origins.length-1) from = "DEST";
							if (j==0) to = "START";
							if (j==results.length-1) to = "DEST";

							//outputDiv.innerHTML += from + " " + to + " " + element.distance.value + "<br/>";
							app.setDist(from,to,element.distance.value);
						}
					}
				}
			}
			
			var day, stime, etime;
			
			function setday(){
				day = document.getElementById('day').selectedIndex;	// 0-6
				stime = document.getElementById('stime').selectedIndex;
				etime = document.getElementById('etime').selectedIndex;
				
				var divi = document.getElementById('step2');
				divi.innerHTML = '<p>Now set your start point and destination. For this, click on the map and click Set buttons below. After setting both points, click "Get Close Lots" button to proceed.<br/><input type="submit" value="Set Start Point" onclick="set_start();" /><br/><input type="submit" value="Set Destination" onclick="set_dest();"/><br/><input type="submit" value="Get Close Lots" onclick="get_routes()" /><br/></p>';
			}
				
			var st;
			function optimal()
			{

				st = app.getOptimal();
				//var ways = app.getWays();
				
				/*var request = {
						origin:start_coord, 
						destination:dest_coord,
						waypts: waypts,
						travelMode: google.maps.DirectionsTravelMode.WALKING
					};	*/
				var outputDiv = document.getElementById('output');
				outputDiv.innerHTML = "hi" + st;
			}
			
			function temp()
			{
				var outputDiv = document.getElementById('output');
				outputDiv.innerHTML = "hi" + st;
			}
		</script>
	</head>
	<body onload = "initialize()">
		<applet name="app" code="calcFee.class" width=10 height=10></applet>
		<h2>M-POP: Madison Parking-lot Optimization Problem</h2>
		<table border="0">
			<tr>
				<th>
					Map
				</th>
				<th>
					Control Button
				</th>
			</tr>
			<tr>
				<th width=820px>
					<div id="map_canvas" style="width:800px; height:600px;"></div>
				</th>
				<th width=300px align = "justify" >
					<div id="select_panel">	
						See Parking Lot info :<br/>
						<input type="submit" value="Get Number" onclick="get_number();" /><input type="submit" value="Details" onclick="get_info();" /><br/>
						<p>Please select day and time when you want to use a parking lot. After that, click "Set Time" button to proceed.</p> 
						Select Day :  
						<select id="day">
						   <option value="mon">Monday</option>
						   <option value="tue">Tuesday</option>
						   <option value="wed">Wednesday</option>
						   <option value="thu">Thursday</option>
						   <option value="fri">Friday</option>
						   <option value="sat">Saturday</option>
						   <option value="sun">Sunday</option>
						</select>
						<br/>
						Select Start Time :  
						<select id="stime">
							<option value="00">00</option>
							<option value="01">01</option>
							<option value="02">02</option>
							<option value="03">03</option>
							<option value="04">04</option>
							<option value="05">05</option>
							<option value="06">06</option>
							<option value="07">07</option>
							<option value="08">08</option>
							<option value="09">09</option>
							<option value="10">00</option>
							<option value="11">11</option>
							<option value="12">12</option>
							<option value="13">13</option>
							<option value="14">14</option>
							<option value="15">15</option>
							<option value="16">16</option>
							<option value="17">17</option>
							<option value="18">18</option>
							<option value="19">19</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>
							<option value="23">23</option>
							<option value="24">24</option>
						</select>
						<br/>
						Select End Time :  
						<select id="etime">
							<option value="00">00</option>
							<option value="01">01</option>
							<option value="02">02</option>
							<option value="03">03</option>
							<option value="04">04</option>
							<option value="05">05</option>
							<option value="06">06</option>
							<option value="07">07</option>
							<option value="08">08</option>
							<option value="09">09</option>
							<option value="10">00</option>
							<option value="11">11</option>
							<option value="12">12</option>
							<option value="13">13</option>
							<option value="14">14</option>
							<option value="15">15</option>
							<option value="16">16</option>
							<option value="17">17</option>
							<option value="18">18</option>
							<option value="19">19</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>
							<option value="23">23</option>
							<option value="24">24</option>
						</select>	
						<br/>
						<input type="submit" value="Set Time" onclick="setday();" /><br/>						
					</div>
					<div id="step2">
					</div>
					<div id="step3">
					</div>
					<div id="step4">
					</div>
					<input type="submit" value="Optimal Route" onclick="optimal()" />
					<input type="submit" value="Osadfsd" onclick="temp()" />
				</th>
			</tr>
			<tr>
				<th>Output</th>
			</tr>
			<tr>
				<th width = "820px" align = "justify">
					<div id="output" align="left"></div>
				</th>
			</tr>
			
		</table>
	</body>
</html>